<!--
 * @Author: leiming
 * @Date: 2022-09-26 12:37:24
 * @LastEditors: leiming
 * @LastEditTime: 2022-09-26 13:58:18
 * @Description: file content
-->
<template>
    <div v-show="isShow" class="selectPopUp">
        <p class="title border-bottom padding mid-between list-p">
            <span class="top-title">{{ title }}</span>
            <i class="el-icon el-icon-close close-icon" @click="hide()"></i>
        </p>
        <p class="title border-bottom padding current-p">
            当前城市：<span class="current-title">{{ currentItem.name || currentItem.cityName }}</span>
            <span class="loc-title hand" @click="fixedCity">定位城市</span>
        </p>
        <p class="title border-bottom padding top-p">
            <span
                v-for="(topCity, listIndex) in topSelectList"
                :key="listIndex"
                class="top-margin"
                @click="typeClick(topCity)"
            >{{ topCity.name }}</span
            >
        </p>
        <div class="content custom-scroll">
            <div v-for="(list, listIndex) in provinceCityList.data" :key="listIndex" class="item">
                <div v-for="(item, iIndex) in list" :key="iIndex" class="item">
                    <div v-for="(provCity, pIndex) in item.provCity" :key="pIndex" class="box">
                        <div class="pro-box">
                            <span class="pro-letter">{{ item.letter }}</span>
                            <span class="pro-name">{{ provCity.provName }}：</span>
                        </div>
                        <ul class="ul">
                            <li
                                v-for="(city, cIndex) in provCity.cityLists"
                                :key="cIndex"
                                class="city-name"
                                @click="typeClick(city)"
                            >
                                {{ city.cityName }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { getProvinceCityList } from '@/api/common';

export default {
    name: 'SingleSelectPopup',
    props: {
        currentItem: {
            type: Object,
            required: true,
        },
        isOnlyCity: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            required: true,
        },
        elevatorType: {
            type: [Number, String],
            default: 0,
        },
    },
    data() {
        return {
            topSelectList: [
                {
                    cityCode: '000000',
                    name: '全国',
                    typeLevel: 1,
                },
                {
                    cityCode: '110100',
                    name: '北京市',
                    typeLevel: 3,
                },
                {
                    cityCode: '310100',
                    name: '上海市',
                    typeLevel: 3,
                },
                {
                    cityCode: '440100',
                    name: '广州市',
                    typeLevel: 3,
                },

                {
                    cityCode: '440300',
                    name: '深圳市',
                    typeLevel: 3,
                },

                {
                    cityCode: '510100',
                    name: '成都市',
                    typeLevel: 3,
                },
                {
                    cityCode: '330100',
                    name: '杭州市',
                    typeLevel: 3,
                },
                {
                    cityCode: '320100',
                    name: '南京市',
                    typeLevel: 3,
                },
                {
                    cityCode: '120100',
                    name: '天津市',
                    typeLevel: 3,
                },
                {
                    cityCode: '420100',
                    name: '武汉市',
                    typeLevel: 3,
                },
                {
                    cityCode: '500100',
                    name: '重庆市',
                    typeLevel: 3,
                },
            ],
            provinceCityList: {
                loading: false,
                data: [],
            },
            citys: [],
            showLetter: '',
            isShow: true,
        };
    },
    created() {
        // this.getProvinceCityList();
    },
    methods: {
        getProvinceCityList() {
            this.provinceCityList.loading = true;
            // const { elevatorType } = this.$route.query;
            getProvinceCityList(this.elevatorType)
                .then((res) => {
                    this.provinceCityList.loading = false;
                    if (res.result) {
                        this.provinceCityList.data = res.result;
                        this.citys = this.getCitys(this.provinceCityList.data);
                    }
                })
                .catch((res) => {
                    this.provinceCityList.loading = false;
                });
        },
        getCitys(data) {
            let arr = [];
            for (let key in data) {
                // eslint-disable-next-line no-loop-func
                data[key].forEach((item) => {
                    arr = arr.concat(item.provCity[0].cityLists);
                    return false;
                });
            }
            return arr;
        },
        getCityCode(cityName) {
            let item = this.citys.find((val) => {
                return val.cityName === cityName;
            });
            return item;
        },
        // 用户选择国家，某个省份，城市
        typeClick(val) {
            // console.log(val)
            if (val.typeLevel !== 3 && this.isOnlyCity) {
                return;
            }
            if (val.provName) {
                val.name = val.provName;
            }
            if (val.cityName) {
                val.name = val.cityName;
            }
            this.$emit('returnResult', val);
            this.hide();
        },
        // 定位用户当前城市
        fixedCity() {
            this.$emit('fixedCity', this.citys);
        },
        hide() {
            this.$emit('hide');
        },
    },
};
</script>

<style lang="scss" scoped>
$color-blue: #f44a4a; // 主色
$color-main: $color-blue; // 主色
$color-bg-3: #ffffff; // 纯色背景
$color-text-6: #e0e0e0; // 文字辅助6
$color-shadow-11: rgba(0, 0, 0, 0.1); // 文字投影11
$color-origin-blue: #20a0ff; // 超链接颜色
$color-border: #e5e7e9; // 边框
$color-text: #181819; // 文字主色
$color-text-1: #999999; // 文字辅色
.selectPopUp {
    background: $color-bg-3;
    line-height: 20px;
    box-shadow: 0 3px 5px 0 $color-shadow-11;
    border-radius: 2px;
    .active {
        color: $color-blue;
    }
    .padding {
        padding: 0 20px;
    }

    .top-margin {
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        color: $color-origin-blue;
        cursor: pointer;
        &:first-child {
            margin-left: 0;
        }
    }
    .close-icon {
        cursor: pointer;
    }
    .icon1 {
        font-size: 16px;
        color: #e5e7e9;
    }
    .title {
        font-size: 14px;
        font-weight: 400;
        color: $color-text;
    }
    .current-title {
        font-size: 14px;
        font-weight: bold;
        color: #f44a4a;
    }
    .loc-title {
        float: right;
        font-size: 12px;
        font-weight: 400;
        color: $color-text-1;
        background: $color-bg-3;
        border: 1px solid $color-border;
        border-radius: 2px;
        line-height: 12px;
        padding: 6px 9px 6px 9px;
        margin-top: 10px;
        cursor: pointer;
    }
    .list-p {
        line-height: 36px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .current-p {
        line-height: 44px;
        align-self: auto;
    }
    .top-p {
        line-height: 33px;
    }
    .margin3 {
        margin: 20px 0 14px;
    }
    .item {
        margin-bottom: 22px;
    }
    .content {
        max-height: 293px;
        overflow-y: scroll;
        padding: 20px 0 0 20px;
        .pro-letter {
            margin-right: 12px;
            font-size: 18px;
            font-weight: bold;
            color: $color-text-6;
            display: flex;
            width: 15px;
        }
        .pro-name {
            cursor: pointer;
            font-size: 14px;
            font-weight: 400;
            color: $color-text;
            width: 60px;
        }
        .city-name:hover {
            text-decoration: underline;
            color: $color-origin-blue;
            cursor: pointer;
        }
        // .pro-name:hover {
        //     text-decoration: underline;
        //     color: $color-origin-blue;
        // }
        .type {
            width: 63px;
            vertical-align: top;
            display: inline-block;
        }
        .box {
            display: flex;
            width: 568px;
        }
        .pro-box {
            display: flex;
            width: 83px;
            margin-right: 10px;
        }
        .ul {
            display: inline-block;
            font-size: 0;
            color: $color-text-1;
            & li {
                display: inline-block;
                font-size: 14px;
                font-weight: 400;
                color: $color-text-1;
                margin-right: 10px;
            }
        }
    }
}
</style>
